<template>
  <div class="app">
    <h3>我是App组件（祖）,{{name}}--{{price}}</h3>
    <Child/>
  </div>
</template>

<script>
import {reactive,toRefs,provide} from 'vue'
import Child from  './components/Child.vue'
export default {
  name: "App",
  components: {Child},
  setup(){
    let car = reactive({
        name: '奔驰',
        price: '40W'
    })

    provide('car',car)// 给自己的后代组件传递数据

    return {
      ...toRefs(car)
    }
  }
}
</script>

<style>
  .app{
    background-color: gray;
    padding: 10px;
  }
</style>